<script>
function removeImg(){
    $('a#imgolder').hide();
    $('a#remove_img_older').hide();
    $('a#restore_img_older').show();
}

function restoreImg(){
    $('a#imgolder').show();
    $('a#remove_img_older').show();
    $('a#restore_img_older').hide();
}
function unlinkOlderImg(_imgName){
    //neu da co anh moi thi xoa anh do di khoi server
    if(_imgName!='-1'){
        $.ajax({
           url: baseUrl()+'/admin/category/delimg/img/'+_imgName
        });
    }
}

function uploadfile(){                   
    var btnUpload = $('a#choose_img');
    var status = $('#file_uploaded');
    new AjaxUpload(btnUpload, {
        action: baseUrl()+'/admin/category/upload',
        name: 'imgfile',
        onSubmit: function(file, ext){                
            $('a#choose_img').append('<img id="beforeupload" src="'+baseUrl()+'/app/templates/admin/images/loading.gif" width="220" height="19"/>');
        },
        onComplete: function(file, response){                      
            $('#beforeupload').remove();
            if(response=="0") {
                alert('file da chon khong la dinh dang anh!');
                return false;
            }
            if (response=="-1") {
                alert('hay chon file ko qua 5M!');
                return false;
            }               
            else{
                var older_img = $('input#attachs').val();
                //xoa anh moi dang hien thi vi anh da dc upload nen server
                unlinkOlderImg(older_img);
                
                //tach ten anh va duong dan cua no
                var cuts = response.indexOf('@');
                var imgsrc=response.substring(0,cuts);
                var filename=response.substring(cuts+1);
                
                //hien thi anh moi
                $('img#newimg').attr('src',imgsrc);
                $('a#viewimg').attr('href',imgsrc);
                
                //hien thi ten anh moi
                $('label#imgname').html(file);
                $('input#attachs').val(filename);
                
                // an anh cu di                 
                removeImg(); 
                return false;                
            }            
        }
    });                                                       
}

</script>

<?php 
	$err = $this->err;
	$cat= $this->cat;
	
?>
<h1>Edit Category</h1>
<form name="frmEditCat" method="post" enctype="multipart/form-data">
		<div class="err"><?php echo $err; ?></div>
	<table width="100%" cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td>Category name: </td>
			<td>
            <input type="text" name="txtCatName" value="<?php echo $cat['cat_name'];?>" />
            </td>			
		</tr>
		<tr>
			<td>Description: </td>
			<td><textarea id="txtSortDes" name="txtCatDes" cols="60" rows="10"><?php echo $cat['cat_des']; ?></textarea></td>
		</tr>        
		<tr>
			<td>Image: </td>
			<td>
            <table width="100%">
                <tr>
                    <td>
                    <h4>older image:</h4>
                    </td>
                    <td>
                        <a id="imgolder" class="fancybox" href="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/upload/category/<?php echo $cat['cat_img']; ?>">
                        <img id="" src="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/upload/category/<?php echo $cat['cat_img']; ?>" alt="<?php echo $cat['cat_img']; ?>" style="border:1px solid #c0c0c0; padding:3px; max-width: 100px; max-height: 100px;"/>
                        </a>
                        <a id="remove_img_older" href="javascript:void(0);" onclick="removeImg();">remove</a>
                        <a style="display: none;" id="restore_img_older" href="javascript:void(0);" onclick="restoreImg();">restore img older</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h4>new img:</h4>            
                    </td>
                    <td>
                        <a id="choose_img" href="javascript:void(0);" onclick="uploadfile();">Choose new image</a>
                        <div id="file_uploaded">
                            <input id="attachs" type="hidden" name="attach" value="-1" /> 
                            <p style="width:100%; margin-bottom:10px;">
                                <a id="viewimg" class="fancybox" href="">
                                    <img id="newimg" src="" style="border:1px solid #c0c0c0; padding:3px; max-width: 100px; max-height: 100px;"/>
                                </a>
                                <label id="imgname"></label>
                            </p>
                        </div>
                    </td>
                </tr>
            </table>                        
            </td>
		</tr>
	</table>
	<div class="save-reset">
		<input type="submit" value="SAVE" />&nbsp;&nbsp;
		<input type="reset" value="Reset" />
	</div>
</form>